<template>
  <div class="pigeonhole" id="pigeonhole">
    <div class="timePicker">
      <span class="selectLable">归档时间:</span>
      <date-range-picker
        v-model:value="timeValue"
        :disabledInfo="disabledInfo"
        @change="changeTime"
      ></date-range-picker>
      <!-- <span class="selectLable">归档时间:</span> -->
      <a-input
        v-model:value="params.title"
        @blur="changeTime"
        placeholder="搜索标题"
        style="width: 192px; height: 32px; margin-left: 16px"
      >
        <template #suffix>
          <i class="iconfont icon-search" @click="changeTime"></i>
        </template>
      </a-input>
    </div>
    <treeTable
      :columns="columns.pigeonholeColumn"
      :dataSource="resData.records"
      :isSelect="true"
      :scroll="scroll"
      ref="tagBaseTables"
      :isShowPagination="isShowPagination"
      :simple="true"
      :showCheckDelete="showCheckDelete"
      :total="resData.total"
      @changePage="changePage"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <a
            class="eidtRecords"
            :class="{ disable: !btnPerm.includes('outArchiveAble') }"
            @click="fileDelete([record.id])"
            >出档</a
          >
        </template>
      </template>
      <template #otherOpration>
        <a-button
          :style="{ 'margin-left': '8px' }"
          @click="deleteSelectedAll"
          :disabled="!rowSelection.length || !btnPerm.includes('outArchiveAble')"
          >出档</a-button
        >
      </template>
    </treeTable>
    <!-- 出档弹窗 -->
    <contentRestore
      v-if="isRestoreVisible"
      :isVisible="isRestoreVisible"
      :isPigeonhole="true"
      :contentIds="contentId"
      @handleOk="handleOk"
      @handleCancle="isRestoreVisible = false"
    ></contentRestore>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, createVNode, computed, watch } from "vue";
import treeTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/tableConfig/tableColumn/contentManageColumn";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { scrollType, configDataType } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { Modal, message } from "ant-design-vue";
import dateRangePicker from "@/components/picker/dateRangePicker.vue";
import request from "@/api/index";
import contentRestore from "@/c-views/content//contentRestore.vue";
import { routerPerm } from "@/utils/common";
const btnPerm = ref<any[]>([]);
const props = defineProps({
  channelId: {
    type: [Number, String],
    default: null,
  },
});
const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义
let resData = reactive<configDataType>({ total: 0, size: 10, records: [] });
let scroll: scrollType = reactive({ y: "", isFixed: false });
const timeValue = ref<(string | number)[]>([]);
const valueFormat = ref("YYYY-MM-DD HH:mm:ss");
const tagBaseTables = ref<any>(null);
let rowSelection = ref<(string | number)[]>([]);
let params: dataSourceType = reactive({
  //头部筛选请求参数格式
  pageNumber: 1,
  pageSize: 10,
  channelId: props.channelId,
  title: "",
});
interface dataSourceType {
  [propName: string]: any;
}
//data
const disabledInfo = ref({
  type: 2,
  startDays: 0,
});
const contentId = ref<any[]>([]); // 内容id
let isRestoreVisible = ref<boolean>(false); // 控制归档列表的出档弹窗
//监听

watch(
  () => props.channelId,
  (newVal, oldVal) => {
    params.channelId = newVal;
    fetchContentHistoryPage();
  },
  { deep: true }
);
//computed
rowSelection = computed(() => {
  return tagBaseTables.value.selectedRowKeys;
});
const fetchContentHistoryPage = async (datas: dataSourceType = {}) => {
  const data = await request.fetchContentHistoryPage(params);
  resData.total = data.total;
  resData.records = data.records;
  tagBaseTables.value.selectedRowKeys = [];
  nextTick(() => {
    let obj = getTableScroll(74, "pigeonhole", 80);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};
const changeTime = (data: any) => {
  if (data) {
    params.fileTimeStart = data[0];
    params.fileTimeEnd = data[1];
  } else {
    params.fileTimeStart = undefined;
    params.fileTimeEnd = undefined;
  }
  fetchContentHistoryPage();
};

const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  params.pageSize = data.pageSize;
  params.pageCurrent = data.pageCurrent;
  fetchContentHistoryPage();
};
// 单个出档
const fileDelete = (item: any) => {
  if (!btnPerm.value.includes("outArchiveAble")) return;
  contentId.value = item;
  isRestoreVisible.value = true;
};
// 出档多个
const deleteSelectedAll = () => {
  if (!btnPerm.value.includes("outArchiveAble")) return;
  isRestoreVisible.value = true;
  contentId.value = tagBaseTables.value.selectedRowKeys;

  // fileDelete(tagBaseTables.value.selectedRowKeys);
};

const handleOk = () => {
  isRestoreVisible.value = false;
  fetchContentHistoryPage();
  console.log("ok");
};

onMounted(() => {
  btnPerm.value = routerPerm();
  fetchContentHistoryPage();
});
</script>

<style lang="less" scoped>
.pigeonhole {
  background-color: #fff;
  padding: 24px;
  // height: calc(100% - 84px);
  // overflow: hidden;
  // display: flex;
  // flex-direction: column;

  .eidtRecords {
    // margin-right: 16px;
  }

  .timePicker {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    align-items: center;

    .selectLable {
      margin-right: 12px;
      font-size: 14px;
      color: #333;
    }
  }

  // .ant-table-cell:nth-last-of-type(1) {
  //   text-align: right;
  //   // margin-right: 16px;
  // }
}
</style>
<style lang="scss">
#pigeonhole {
  .ant-table-cell:nth-last-of-type(1) {
    text-align: right;
    margin-right: 16px;
  }
}
</style>
